<template>
  <div class="sanstyle">
    <!--左边 B-->
    <div>
      <div class="ssl">
        <!--标题 B-->
        <div class="sstitle" style="padding-right: .35rem;">
          <div class="twz">
            <span class="dwz">设备概况</span>
            <br />
            <span class="xwz">Equipment condition</span>
          </div>
        </div>
        <!--标题 E-->

        <!--三栏布局B-->
        <div class="stjqy">
          <div class="bdbk" style="height: 20%">
            <div class="xsl">
              <div>
                <img
                  src="../../static/images/sxtzx.png"
                  alt=""
                  class="img_msg"
                />
                <div class="xsl_right">
                  <p style="color: #12FB8C;">{{ Vonline }}</p>
                  <p>摄像头在线数量</p>
                </div>
              </div>

              <div>
                <img
                  src="../../static/images/sxtlx.png"
                  alt=""
                  class="img_msg"
                />
                <div class="xsl_right">
                  <p>{{ Voffline }}</p>
                  <p>摄像头离线数量</p>
                </div>
              </div>
              <div>
                <img
                  src="../../static/images/spts.png"
                  alt=""
                  class="img_msg"
                />
                <div class="xsl_right">
                  <p>{{ Vnum }}</p>
                  <p>视频条数</p>
                </div>
              </div>
            </div>
            <div class="xsl">
              <div>
                <img
                  src="../../static/images/swzx.png"
                  alt=""
                  class="img_msg"
                />
                <div class="xsl_right">
                  <p style="color: #12FB8C;">{{ Sonline }}</p>
                  <p>声纹在线数量&emsp;</p>
                </div>
              </div>

              <div>
                <img
                  src="../../static/images/swlx.png"
                  alt=""
                  class="img_msg"
                />
                <div class="xsl_right">
                  <p>{{ Soffline }}</p>
                  <p>声纹离线数量&emsp;</p>
                </div>
              </div>
              <div>
                <img
                  src="../../static/images/swts.png"
                  alt=""
                  class="img_msg"
                />
                <div class="xsl_right">
                  <p>{{ Snum }}</p>
                  <p>声纹条数</p>
                </div>
              </div>
            </div>
          </div>
          <div class="bdbk" style="height: 40%; position: relative">
            <div
              class="sstitle"
              style="padding-right: .35rem;margin-top: 20px;"
            >
              <div class="twz">
                <span class="dwz">保护等级统计</span>
                <br />
                <span class="xwz">Monitor today</span>
              </div>
            </div>
            <div
              style="
                position: absolute;
                left: -0.2rem;
                height: calc(100% - 0.5rem);
                width: calc(100% + 0.4rem);
              "
              id="bar1"
            ></div>
          </div>
          <div style="height: 40%; position: relative">
            <!-- <div class="llbt">
              <span class="dwz" style="line-height: 0">发现动物最多Top5</span>
              <br />
              <span class="xwz" style="line-height: 0">Top5 most animals found</span>
            </div> -->
            <div
              class="sstitle"
              style="padding-right: .35rem;margin-top: 20px;"
            >
              <div class="twz">
                <span class="dwz">活动频率</span>
                <br />
                <span class="xwz">Species activity by time of day today</span>
              </div>
            </div>
            <div
              style="
                position: absolute;
                left: -0.4rem;
                height: calc(100% - 0.6rem);
                width: calc(100% + 0.4rem);
                overflow: hidden;
              "
              id="bar2"
            ></div>
          </div>
        </div>
        <!--三栏布局E-->
      </div>
    </div>
    <!--左边 E-->
    <!--中间 B-->
    <div style="position: relative ; padding: 0 .16rem;height:100%;">
      <div class="fblx" style="cursor: pointer">
        <div
          v-for="(item, index) in fbList"
          :key="index"
          :style="item.sts ? 'opacity: 1;' : 'opacity: .6'"
          @click="btn_cut(item)"
        >
          <img :src="item.ico" alt="" class="img_medium" />
          <span>{{ item.name }}</span>
          (<span>{{ item.num }}台</span>)
        </div>
      </div>
      <BaseMap ref="baseMap" :cut="0" :Syears="1"></BaseMap>
      <!--中间地图 B-->
      <!-- <div id="map" style="height: 75%; width: 100%; margin-top: 15%"></div> -->
      <!--中间地图 E-->
    </div>
    <!--中间 E-->
    <!--右边 B-->
    <div>
      <div class="ssls" style="height: 100%">
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <span class="dwz">今日监测动态({{ tot }})</span>
            <br />
            <span class="xwz">Key species dynamics</span>
          </div>
        </div>
        <!--标题 E-->
        <div class="stjqy">
          <div class="bdbk rzs" style="display: flex; height: 65%">
            <div class="Dynamic_box" v-for="(item, index) in otherData">
              <div class="left_img">
                <img src="../../static/images/dw.png" alt="" />
                <span>{{ new Date(item.occurTime).toLocaleTimeString() }}</span>
              </div>
              <div class="center">
                <span>{{ item.bizTag }}-{{ item.deviceName }}</span>
                <div class="center_img2" v-if="item.list.type == 1">
                  <video
                    :src="item.list.videoUrl"
                    controls
                    :controls="true"
                    width="100%"
                    height="100%"
                    :autoplay="false"
                  ></video>
                </div>
                <div class="center_img" v-if="item.list.type == 2">
                  <div class="img_box" @click.stop="playAudio(item.list)">
                    <div class="img_box_left">
                      <img
                        :src="
                          isplay == item.list.id
                            ? '../../static/images/bf.gif'
                            : '../../static/images/swys.png'
                        "
                        alt=""
                      />
                    </div>
                    <div class="img_box_right">
                      <span>{{ item.duration }}</span>
                      <img
                        :src="
                          isplay == item.list.id
                            ? '../../static/images/zanting.png'
                            : '../../static/images/bofang.png'
                        "
                        alt=""
                      />
                    </div>
                  </div>
                  <!-- <audio :src="item.list.videoUrl" controls></audio> -->
                </div>
              </div>
              <div class="right_img" @click="btn_point(item)">
                <img src="../../static//images/dingwei.png" alt="" />
              </div>
            </div>
            <InfiniteLoading @infinite="getTodayNotices"></InfiniteLoading>
          </div>
          <div style="height: 33%; position: relative;margin-top: .16rem;">
            <div class="sstitles">
              <div class="twzs">
                <span class="dwz">重点物种监测</span>
                <br />
                <span class="xwz">Today's news</span>
              </div>
            </div>
            <div
              style="position: absolute;height: calc(100% - .6rem);width:100% ;"
            >
              <div class="carousel_box">
                <el-carousel :autoplay="false" height="100%">
                  <el-carousel-item
                    v-for="(item, index) in videoData"
                    :key="index"
                  >
                    <div class="video_box">
                      <!-- 播放按钮遮罩层 -->
                      <div
                        class="play_mask"
                        @click="startPlaying(item)"
                        v-if="item.playMaskShow"
                      ></div>
                      <video
                        :src="item.videoPath"
                        :controls="true"
                        width="100%"
                        :autoplay="true"
                      ></video>
                    </div>
                    <div class="video_txt">
                      <div class="video_txt_top">
                        <div class="top_left">
                          <p>{{ item.speciesName }}</p>
                          <p>{{ item.latinName }}</p>
                        </div>
                        <div class="top_right" title="今日识别次数">
                          {{ item.todayNumber }}
                        </div>
                      </div>
                      <p title="累计识别数量">
                        <img
                          src="../../static/images/ewm.png"
                          alt=""
                          style="width: 18px;height: 18px;"
                        />
                        {{ item.yearNumber }}
                      </p>
                      <p title="始见日，终见日，拍摄高峰期">
                        <img
                          src="../../static/images/time.png"
                          alt=""
                          style="width: 20px;height: 20px;"
                        />
                        {{ item.startDay }},{{ item.endDay }},{{
                          parseInt(item.highestMonth.split("-")[1], 10)
                        }}月
                      </p>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--右边 E-->
  </div>
</template>

<script>
import * as echarts from "echarts";
import http from "../utils/http";
import api from "../utils/api";
import myChart from "../components/common/myChart.vue";
import BaseMap from "../components/common/Map.vue";
import birdIcon from "../../static/images/birdicon.png";
import Soundicon from "../../static/images/Soundicon.png";
import InfiniteLoading from "vue-infinite-loading";
export default {
  components: {
    myChart,
    BaseMap,
    InfiniteLoading
  },
  // name: "xxjc",
  data() {
    return {
      fbList: [
        {
          name: "鸟类监控",
          num: 0,
          ico: "/static/images/nljk.png",
          sts: true
        },
        {
          name: "鸟类声纹",
          num: 0,
          ico: "/static/images/nlsw.png",
          sts: true
        }
      ],
      Voffline: 0, // 摄像头离线数量
      Vonline: 0, // 摄像头在线数量
      Vnum: 0, // 视频条数
      Soffline: 0, // 声纹离线线数量
      Sonline: 0, // 声纹在线线数量
      Snum: 0, // 声纹在线数量
      userName: "",
      areaId: "",
      // manageSite: "yeyahu001",
      manageSite: "",
      videoData: [],
      otherData: [],
      tot: 0,
      pageIndex: 1,
      pageSize: 5,
      jkarr: [],
      swarr: [],
      isplay: null,
      audioPlayer: null,
      usrs: "http://223.71.254.174:1087/"
    };
  },
  mounted() {
    let vm = this;
    async function init() {
      await vm.$refs.baseMap.getcenter();
      // vm.getdataall();
    }
    init();
    this.getTodayNotices({
      loaded: () => {},
      complete: () => {}
    });
  },
  created() {
    this.areaId = sessionStorage.getItem("areaId");
    this.userName = sessionStorage.getItem("username");
    this.manageSite = sessionStorage.getItem("manageSite");
    this.year = new Date().getFullYear();
    this.getMsg();
    this.getTodaylevel();
    this.getTodayactive();
    this.getMap_point();
    this.getKeySpecies();
    // this.getTodayNotices()
  },
  methods: {
    async getMsg() {
      let res = await http.get(api.getDeviceApi);
      if (res.data.code == 200) {
        this.Voffline = res.data.data.videoOfflineNumber;
        this.Vonline = res.data.data.videoOnlineNumber;
        this.Vnum = res.data.data.videoNumber;
        this.Soffline = res.data.data.voiceOfflineNumber;
        this.Sonline = res.data.data.voiceOnlineNumber;
        this.Snum = res.data.data.voiceNumber;
      }
    },
    async getTodaylevel() {
      let res = await http.get(api.getTodayMonitorApi);
      let total = res.data.data.total;
      let inumber = res.data.data.inumber;
      let iiNumber = res.data.data.iiNumber;
      let data = [
        { value: inumber, name: "国家一级" },
        { value: iiNumber, name: "国家二级" },
        { value: total, name: "总数" }
      ];
      this.drawbar1(data);
    },
    async getTodayactive() {
      let res = await http.get(api.getTodayActiveApi);
      let arr = res.data.data.hours;
      let species = res.data.data.species.map(item => item || 0);
      let hours = arr.map(item => item + "时");
      setTimeout(() => {
        this.drawbar2(hours, species);
      }, 100);
    },
    drawbar1(data) {
      let myChart = echarts.getInstanceByDom(document.getElementById("bar1"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("bar1"));
      }
      let option = {
        tooltip: {
          trigger: "item",
          axisPointer: {
            label: {
              backgroundColor: "#6a7985"
            }
          },
          formatter: function(params) {
            // 自定义显示内容
            // params 是包含当前数据点信息的对象
            let result = params.name + "<br/>";
            result += params.marker + params.value + "只/次";
            return result;
          }
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            center: ["45%", "45%"],
            emphasis: {
              label: {
                show: true,
                fontSize: ".16rem",
                color: "#AAAFC8",
                fontWeight: "normal"
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            // data: [
            //   { value: 1048, name: 'Search Engine' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' },
            //   { value: 300, name: 'Video Ads' }
            // ]
            data: data
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(function() {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    drawbar2(x, y) {
      let myChart = echarts.getInstanceByDom(document.getElementById("bar2"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("bar2"));
      }
      let option = {
        grid: {
          top: "15%",
          right: "3%",
          left: "5%",
          bottom: "5%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              backgroundColor: "#6a7985"
            }
          },
          formatter: function(params) {
            // 自定义显示内容
            // params 是一个包含当前数据信息的数组
            let result = params[0].name + "点" + "<br/>";
            params.forEach(function(item) {
              // 检查 item.value，如果是 null 或 undefined 则使用 0
              let value = item.value || 0;
              result += item.marker + value + "只/次";
            });
            return result;
          }
        },
        title: {
          text: "(单位:只/次)",
          left: "5%",
          // top: '10px',
          textStyle: {
            color: "rgba(255, 255, 255, 0.80)",
            fontSize: ".12rem"
          }
        },
        xAxis: {
          data: x,
          type: "category",
          axisTick: {
            show: false,
            alignWithLabel: false
          },
          axisLabel: {
            textStyle: {
              show: false,
              fontFamily: "PingFang",
              // color: '#5DCFF6',
              color: "rgba(255, 255, 255, 0.80)",
              fontSize: ".14rem"
            },
            rotate: "45",
            interval: 0
          }
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.80)"
            }
          },
          axisLine: {
            show: true //不显示坐标轴线
          },
          axisLabel: {
            textStyle: {
              fontFamily: "PingFang",
              // color: '#5DCFF6',
              color: "rgba(255, 255, 255, 0.80)",
              fontSize: ".14rem"
            }
          }
        },
        series: [
          {
            data: y,
            name: "",
            type: "line",
            symbol: "none",
            symbol: "circle",
            smooth: true,
            symbolSize: 10,
            lineStyle: {
              width: 1,
              type: "solid"
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "#fff",
              color: "#0879FF"
            },
            areaStyle: {
              color: "#fff",
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    // color: 'RGBA(184, 204, 241, 1)'
                    color: "#0879FF"
                  },
                  //   {
                  //     offset: 0.5,
                  //     // color: 'RGBA(184, 204, 241, 0.5)'
                  //     color: "#0879FF",
                  //   },
                  {
                    offset: 1,
                    color: "#0D152F"
                    // color: '#283D46'
                  }
                ],
                false
              ),
              shadowBlur: 0 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          }
        ],
        dataZoom: [
          {
            //添加dataZoom属性即可显示滑动条S
            orient: "horizontal",
            show: true, //控制滚动条显示隐藏
            realtime: true, //拖动滚动条时是否动态的更新图表数据
            handleSize: 0,
            height: "3%", //滚动条高度
            start: 0, //滚动条开始位置（共6等份）
            end: 60, //滚动条结束位置
            top: "94%",
            // bottom: '20%',
            left: "9%", //滚动条靠左侧的百分比
            zoomLock: false, //控制面板是否进行缩放
            startValue: 0, // 从头开始。
            endValue: 5, // 一次性展示6个
            showDetail: false, // 关闭滚动条提示
            // backgroundColor: "rgb(63, 116, 168 , 0.5)",
            backgroundColor: "#0d5156",
            // fillerColor: "rgba(255, 255, 255,0.5)",
            fillerColor: "#2EFFF2",
            borderColor: "#ffca38",
            zoomLock: true,
            zoomOnMouseWheel: false,
            brushSelect: false,
            showDetail: false,
            showDataShadow: false
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(function() {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    // 地图点位
    // async getMap_point() {
    //   // let res = await http.get(api.getWebDevicesApi,
    //   //   {
    //   //     manageSite: this.manageSite,
    //   //     username: this.userName
    //   //   }
    //   // )
    //   // 硅化木测试
    //   let res = await http.get(api.getWebDevicesApi,
    //     {
    //       manageSite: this.manageSite,
    //       username: this.manageSite
    //     }
    //   )
    //   if (res.data.code == 200) {
    //     this.fbList[0].num = res.data.data.humanBirdDevices.length;
    //     this.fbList[1].num = res.data.data.voiceDevices.length;
    //     let arr = []
    //     let newarr = []
    //     res.data.data.humanBirdDevices.forEach((item, index) => {
    //       let z = {
    //         id: item.id,
    //         borderColor: "",
    //         fillColor: "",
    //         iconSrc: birdIcon,
    //         data: item,
    //         geojson: { coordinates: [item.lon, item.lat], type: "Point" },
    //         type: 'birdPoint'
    //       }
    //       arr.push(z);
    //     })
    //     res.data.data.voiceDevices.forEach((item, index) => {
    //       let z = {
    //         id: item.id,
    //         borderColor: "",
    //         fillColor: "",
    //         iconSrc: Soundicon,
    //         data: item,
    //         geojson: { coordinates: [item.lon, item.lat], type: "Point" },
    //         type: 'SoundPoint'
    //       }
    //       newarr.push(z);
    //     })
    //     this.$refs.baseMap.previewshape(newarr, "_Point")
    //     this.$refs.baseMap.previewshape(arr, "_Point")
    //   }
    // },
    async getMap_point() {
      let res = await http.get(api.getWebDevicesApi, {
        manageSite: this.manageSite,
        username: this.userName
      });
      console.log(res, "设备");
      if (res.data.code == 200) {
        this.fbList[0].num = res.data.data.humanBirdDevices.length;
        this.fbList[1].num = res.data.data.voiceDevices.length;
        this.jkarr = res.data.data.humanBirdDevices.map(item => ({
          id: item.id,
          borderColor: "",
          fillColor: "",
          iconSrc: birdIcon,
          data: item,
          geojson: { coordinates: [item.lon, item.lat], type: "Point" },
          type: "birdPoint"
        }));
        this.swarr = res.data.data.voiceDevices.map(item => ({
          id: item.id,
          borderColor: "",
          fillColor: "",
          iconSrc: Soundicon,
          data: item,
          geojson: { coordinates: [item.lon, item.lat], type: "Point" },
          type: "SoundPoint"
        }));
        await this.$refs.baseMap.previewshape(this.swarr, "new_Point");
        await this.$refs.baseMap.previewshape(this.jkarr, "_Point");
      }
    },
    // 重点物种监测
    async getKeySpecies() {
      let res = await http.get(api.getKeySpeciesApi);
      if (res.data.code == 200) {
        this.videoData = res.data.data;
        // this.videoData[0].highestMonth = '2024-12'
      }
    },
    startPlaying(e) {
      e.playMaskShow = false;
      let Media = document.getElementById(e.id);
      Media.play();
    },
    // 今日动态
    async getTodayNotices($state) {
      let res = await http.get(api.getTodayNoticesApi, {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      });
      if (res.data.code == 200) {
        this.tot = res.data.data.total;
        const newItems = res.data.data.records.map(item => {
          item.list = JSON.parse(item.bizContent);
          return item;
        });
        await Promise.all(
          res.data.data.records.map(async e => {
            let arr = JSON.parse(e.bizContent);
            if (arr.type == 2) {
              let usr = "/static/images/sy.wav";
              let duration = await this.getAudioDuration(
                this.usrs + arr.videoUrl
              );
              let minutes = Math.floor(duration / 60);
              let seconds = Math.floor(duration % 60);
              e["duration"] = `${minutes}'${seconds}''`;
            }
          })
        );
        if (newItems.length) {
          this.otherData = [...this.otherData, ...newItems];
          this.pageIndex += 1;
          $state.loaded();
        } else {
          $state.complete();
        }
      } else {
        $state.complete();
      }
    },
    getAudioDuration(url) {
      return new Promise((resolve, reject) => {
        const audio = new Audio();
        // 设置音频源
        audio.src = url;
        // 当音频元数据加载完成时，可以访问duration属性
        audio.addEventListener("loadedmetadata", function() {
          // 注意：duration可能为NaN，如果音频未完全加载或信息不可用
          if (!isNaN(audio.duration)) {
            resolve(audio.duration);
          } else {
            reject("无法获取音频时长");
          }
        });

        // 处理可能的错误
        audio.onerror = function(error) {
          reject(`音频加载错误: ${error}`);
        };

        // 为了确保浏览器开始加载音频，可以在这里手动播放音频（静音）
        audio.crossOrigin = "anonymous"; // 请求带有CORS头
        setTimeout(function() {
          audio
            .play()
            .then(() => {
              audio.pause(); // 立即暂停，只是为了触发加载
            })
            .catch(reject);
        }, 500);
      });
    },
    playAudio(item) {
      if (!this.audioPlayer) {
        // 初始化 Audio 对象
        this.audioPlayer = new Audio();
        this.audioPlayer.addEventListener("ended", () => {
          this.isplay = null;
          console.log("音频播放完毕！");
        });
      }
      // 设置新的音频源
      this.audioPlayer.src = this.usrs + item.videoUrl;
      // 加载并播放音频
      this.audioPlayer.load();
      if (this.isplay === item.id) {
        this.isplay = null;
        this.audioPlayer.pause();
      } else {
        this.isplay = item.id;
        this.audioPlayer.play();
      }
    },
    // 地图定位
    btn_point(item) {
      // let newarr = {
      //   id: item.id,
      //   borderColor: "",
      //   fillColor: "",
      //   iconSrc: Soundicon,
      //   data: item,
      //   geojson: { coordinates: [item.lon, item.lat], type: "Point" },
      //   type: 'SoundPoint'
      // };
      this.$refs.baseMap.btn_tc([item.lon, item.lat], item);
    },
    // 设备开关
    btn_cut(item) {
      item.sts = !item.sts;
      if (item.sts) {
        if (item.name == "鸟类声纹") {
          this.$refs.baseMap.previewshape(this.swarr, "new_Point");
        } else {
          this.$refs.baseMap.previewshape(this.jkarr, "_Point");
        }
      } else {
        if (item.name == "鸟类监控") {
          this.jkarr.forEach(e => {
            this.$refs.baseMap.delPoint("_Point");
          });
        } else {
          this.swarr.forEach(e => {
            this.$refs.baseMap.delPoint("new_Point");
          });
        }
      }
    }
  },
  beforeDestroy() {
    if (this.audioPlayer) {
      this.audioPlayer.removeEventListener("ended", this.onAudioEnded);
      this.audioPlayer = null;
    }
  }
};
</script>

<style scoped>
@import "../../static/css/map_monitoring.css";
/* @import "../../static/css/jbxx.css"; */
/* @import "../../static/css/xxjc.css"; */
</style>
<style scoped>
.el-input__prefix,
.el-input__suffix {
  height: 0;
}

.el-input__inner {
  background-color: transparent;
  color: #fff;
}

.el-carousel {
  height: 100%;
}

.el-carousel__container {
  height: 100%;
  /* padding: 0.1rem; */
  border-radius: 0.08rem;
  background: rgba(46, 255, 242, 0.1);
}

.el-carousel--horizontal {
  overflow: hidden !important;
}

.el-carousel__indicators--horizontal {
  bottom: -0.13rem;
}

/* el-carousel走马灯指示器设置为圆点 */
.el-carousel__indicator--horizontal .el-carousel__button {
  width: 0.1rem;
  height: 0.1rem;
  background: #fff;
  border: 0.01rem solid #fff;
  border-radius: 50%;
  opacity: 0.3;
}

.el-carousel__indicator--horizontal.is-active .el-carousel__button {
  width: 0.1rem;
  height: 0.1rem;
  background: #fff;
  border-radius: 50%;
  opacity: 1;
}
.el-input__inner {
  background-color: transparent;
  color: #fff;
  height: 0.4rem;
  width: 2.08rem;
  border-color: rgba(102, 225, 252, 0.5);
}
.el-picker-panel {
  background-color: #062730;
  color: #fff;
}
.el-date-picker__header-label {
  color: #fff;
}
.el-year-table td .cell {
  color: #fff;
}
/* .el-carousel__container */
</style>
